<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"  %>
<%
	String operation = request.getParameter("operation");
%>
<%@ page import="com.starbaba.core.web.constant.WebConstants"%>
<%@ page import="com.starbaba.system.user.model.UserVO"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.jsp"%>
<style>
.table>th {
	vertical-align: center;
	background-color: grey;
}
input[type="radio"] {
   font-size: 100px;
   vertical-align:middle;
   margin-top:-2px; 
   margin-left:2px;
   margin-bottom:1px;
}
</style>
</head>
<body class="no-skin">
	<div class="page-content">
		<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12 col-sm-12 widget-container-col">
					<div class="widget-box widget-color-blue">
						<!-- #section:custom/widget-box.options.collapsed -->
						<div class="widget-header widget-header-small">
							<h6 class="widget-title lighter">
								<i class="ace-icon glyphicon glyphicon-th-list"></i>一级项名
							</h6>
                            <div class="widget-toolbar no-border">
								<a href="#" data-action="collapse">
									<i class="ace-icon fa fa-chevron-up"></i>
								</a>
							</div>
						</div>
						
						<div class="widget-body">
							<div class="widget-main">
								<form class="form-horizontal" id="queryForm" method="post" enctype="multipart/form-data">
									<input type="hidden" name="userName" id="userName" value="<%=((UserVO) session.getAttribute(WebConstants.SESSION_ATTRIBUTE_USER)).getUsername() %>"/>
									<input type="hidden" name="index" id="index" value="${paramsMap.optionCount}"> 
									<input type="hidden" name="itemId" id="itemId" value="${paramsMap.item.id}"> 
									
									<table id="baseinfo" class="table table-bordered table-striped table-hover table-condensed table-responsive table">
										<tbody id="optionTable">
	                                        <tr header="header">
												<th width="80px">排序调整</th>
												<th width="120px">可选项</th>
												<th width="70px">选中展示子项</th>
												<th width="80px">操作</th>
											</tr>
											<c:forEach items="${paramsMap.optionList}" var="option" varStatus="status">
											<tr id="itemOption${status.index+1}">
												<td>
													<input type="hidden" id="optionId${status.index+1}" name="optionId${status.index+1}" value="${option.id}">
													<input type="hidden" id="sort${status.index+1}" name="sort${status.index+1}" value="${status.index+1}">
													<button type="button" class="btn btn-primary btn-sm no-border" onclick="upMove(${status.index+1})">上</button>&nbsp;
													<button type="button" class="btn btn-primary btn-sm no-border" onclick="downMove(${status.index+1})">下</button>
												</td>
												<td>
												
													<select id="optionBasisId${status.index+1}" name="optionBasisId${status.index+1}">
														<option value="">请选择</option>
														<c:forEach items="${paramsMap.optionBasisList}" var="optionBasis">
															<c:choose>
																<c:when test="${option.option_basis_id eq optionBasis.id}">
																	<option value="${optionBasis.id}" selected="selected">${optionBasis.option_value}</option>
																</c:when>
																<c:otherwise>
																	<option value="${optionBasis.id}">${optionBasis.option_value}</option>
																</c:otherwise>
															</c:choose>
														</c:forEach>
													</select>
												</td>
												<td>
													<c:choose>
														<c:when test="${option.show_son eq '1'}">
														<input type="checkbox" id="show_son${status.index+1}" checked="checked" name="show_son${status.index+1}" value="1"/>
														</c:when>
														<c:otherwise>
														<input type="checkbox" id="show_son${status.index+1}" name="show_son${status.index+1}" value="1"/>
														</c:otherwise>
													</c:choose>
												</td> 
												<td>
													<button type="button" class="btn btn-primary btn-sm no-border" onclick="deleteOption(${status.index+1});">删除</button>
												</td>
											</tr>
											</c:forEach>
										</tbody>
									</table>
								</form>
									
							</div><!-- /.widget-main -->
							<div style="margin: 10px;">
								<button type="button" class="btn btn-primary btn-sm no-border" onclick="addOption();">
									<i class="ace-icon glyphicon glyphicon-plus bigger-110"></i>新增选项
								</button>
							</div>	
						</div><!-- /.widget-body -->
						
					</div><!-- /.widget-box -->
				</div><!-- /.col-sm-12 -->
			</div>
			<div class="clearfix form-actions">
				<div class="col-md-offset-3 col-md-9">
					<button class="btn  btn-inverse  no-border " onclick="doCancle()"
						id="delete">
						<i class="ace-icon fa fa-undo bigger-160"></i> 取消
					</button>
					&nbsp; &nbsp; &nbsp;
					<button id="btn-save" name="btn-save"
						class="btn  btn-success  no-border" type="button"
						onclick="doSave()">
						<i class="ace-icon fa fa-floppy-o bigger-160"></i> 保存
					</button>
				</div>
			</div>
		</div>
	</div>

	<%@ include file="/common/common-js.jsp"%>
	<%@ include file="/discovery/maxlength.jsp"%>
	<script type="text/javascript" src="${ctx}/ace/js/maxlength.js"></script>
	<script type="text/javascript" src="${ctx}/js/wangEditor-1.3.11.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<script>
		var $multiple = 1;
		var $selector = '';
		var $input = '';
		
		var jsonBasisOption = JSON.parse('${paramsMap.jsonBasisOption}');

		$(function() {
			$('#img').change(function() {
				var file = this.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$('#thumbnail').attr('src', this.result);
					$('#img').attr("value", this.result);
				});
			});

			//点击按钮
			$('.get-img-modal').on('click', function() {
				//展示模态框
				var $this = $(this);
				var $title = $this.attr('data-title');
				$input = $this.attr('data-input');
				$selector = $this.attr('data-selector');
				$multiple = $this.attr('data-multiple');
				if ($multiple == 1) {
					$('input[name="myFile"]').prop('multiple', true);
				} else {
					$('input[name="myFile"]').prop('multiple', false);
				}
				$('#Modal').find('h4.modal-title').html($title);
				$('#Modal').modal('show');
				return false;
			});

			$('.thumbnail').on('click', function() {
				$('#thumbnail').attr('src', "");
				$("input[id=thumbnail]").val("");
			});

		});
		
		//获取项名的下拉框
		function getOptionBasisHtml(index){
			var optionBasisHtml = '';
			optionBasisHtml += '<select id="optionBasisId'+index+'" name="optionBasisId'+index+'">';
			optionBasisHtml += 	'<option value="">请选择</option>';
			for(var i=0;i<jsonBasisOption.length;i++){
				optionBasisHtml += '<option value="'+jsonBasisOption[i].id+'">'+jsonBasisOption[i].option_value+'</option>';
			}
			optionBasisHtml += '</select>';
			return optionBasisHtml;
		}
		
		//上移
		function upMove(index){
			var currTrTab = $("#itemOption"+index);
			var prevTrTab = currTrTab.prev();
			var header = prevTrTab.attr("header");
			if(header == 'header'){  //如果是第一行上移，忽略
				return;
			}
			var currOptionId = currTrTab.find("input[id=optionId"+index+"]").val();  //当前optionId
			var currOptionBasisId = currTrTab.find("select[id=optionBasisId"+index+"]").val();  //当前选中的二级项
			var currShowSon = currTrTab.find("input[id=show_son"+index+"]").prop("checked"); //获取当前是否选中显示子项按钮
			var prevOptionId = prevTrTab.find("input[id^=optionId]").val();  //前一项optionId
			var prevOptionBasisId = prevTrTab.find("select[id^=optionBasisId]").val();  //前一项选中的二级项
			var prevShowSon = prevTrTab.find("input[id^=show_son]").prop("checked"); //前一项是否选中显示子项按钮
			
			//交换上下位置的值
			prevTrTab.find("input[id^=optionId]").val(currOptionId);
			prevTrTab.find("select[id^=optionBasisId]").val(currOptionBasisId);
			prevTrTab.find("input[id^=show_son]").prop("checked",currShowSon); 
			currTrTab.find("input[id=optionId"+index+"]").val(prevOptionId);
			currTrTab.find("select[id=optionBasisId"+index+"]").val(prevOptionBasisId);
			currTrTab.find("input[id^=show_son]").prop("checked",prevShowSon); 
			
		}
		
		//下移
		function downMove(index){
			var currTrTab = $("#itemOption"+index);
			var nextTrTab = currTrTab.next();
			if(nextTrTab.length == 0){  //如果是最后一行，忽略
				return;
			}
			
			var currOptionId = currTrTab.find("input[id=optionId"+index+"]").val();  //当前optionId
			var currOptionBasisId = currTrTab.find("select[id=optionBasisId"+index+"]").val();  //当前选中的二级项
			var currShowSon = currTrTab.find("input[id=show_son"+index+"]").prop("checked");  //获取当前是否选中显示子项按钮
			var nextOptionId = nextTrTab.find("input[id^=optionId]").val();  //下一项optionId
			var nextOptionBasisId = nextTrTab.find("select[id^=optionBasisId]").val();  //下一项选中的二级项
			var nextShowSon = nextTrTab.find("input[id^=show_son]").prop("checked"); //下一项是否选中显示子项按钮
			
			//交换上下位置的值
			nextTrTab.find("input[id^=optionId]").val(currOptionId);
			nextTrTab.find("select[id^=optionBasisId]").val(currOptionBasisId);
			nextTrTab.find("input[id^=show_son]").prop("checked",currShowSon); 
			currTrTab.find("input[id=optionId"+index+"]").val(nextOptionId);
			currTrTab.find("select[id=optionBasisId"+index+"]").val(nextOptionBasisId);
			currTrTab.find("input[id^=show_son]").prop("checked",nextShowSon); 
		}
		
		function addOption(){
			var optionTable = $("#optionTable");
			var index = $("#index").val();
			index++;
			var html = "";
			html += '<tr id="itemOption'+index+'" index="'+index+'">'
			     + 		'<td>'
			     +			'<input type="hidden" id="optionId'+index+'" name="optionId'+index+'" value="">'
			     + 			'<input type="hidden" id="sort'+index+'" name="sort'+index+'" value="'+index+'">'
			     + 			'<button type="button" class="btn btn-primary btn-sm no-border" onclick="upMove('+index+')">上</button>&nbsp;'
			     + 			'<button type="button" class="btn btn-primary btn-sm no-border" onclick="downMove('+index+')">下</button>'
			     + 		'</td>'
			     + 		'<td>'
			     + 			getOptionBasisHtml(index)
			     + 		'</td>'
			     +		'<td>'
			     +			'<input type="checkbox" id="show_son'+index+'" name="show_son'+index+'" value="1"/>'
			     +		'</td>'
			     + 		'<td>'
			     + 			'<button type="button" class="btn btn-primary btn-sm no-border" onclick="deleteOption('+index+');">删除</button>'
			     + 		'</td>'
			     + 	'</tr>';
			$("#index").val(index);
			optionTable.append(html);
		}

		function deleteOption(index){
			var itemOptionTab = $("#itemOption"+index);
			var optionId = $("#optionId"+index).val();
			var answer = window.confirm("是否确认删除?");
			if(answer){
				if(isBlock(optionId)){  //临时添加的option
					itemOptionTab.remove();
				}else{  //先删除数据库数据，再删除页面option
					var data = {"optionId":optionId};
					$.ajax({
						type:"post",	
						async:true,
						data:data,
						url: "${ctx}/apiActivityConf/deleteItemOption.action",
						success:function(resp){
							itemOptionTab.remove();
						},
						error:function(error){
							alert("删除失败！");
						}
					});
				}
			}
		}

		function doCancle() {
			try {
				if (parent) {
					parent.parent['__extdialog_active'].dialog('close');
				}
			} catch (e) {
				window.history.back();
			}
		}

		function doSave() {
			var flag = false; 
			var optionBasisTab = $("select[id^='optionBasisId']");
			optionBasisTab.each(function(index,el){
				var $this = $(el);
				var val = $this.val();
				if(isBlock(val)){
					flag = true;
					return;
				}
			});
			if(flag){
				parent.bootbox.alert("请选择二级选项");
				return;
			}
			
			saveForm();
		}

		function saveForm() {
			var saveBtn = $("#btn-save");
			saveBtn.attr("disabled","disabled");
			
			var saveUrl = "${ctx}/apiActivityConf/saveOptions.action"; 
			var options = {
				url : saveUrl,
				type : "POST",
				dataType : "json",
				beforeSend : function() {
					$(".load_bg,.load_img").show();
				},
				success : function(data) {
					saveBtn.removeAttr("disabled");
					
					parent.parent['__extdialog_active'].dialog('close');
					var jsonObj = JSON.parse(data);
					var success = jsonObj.members.success;
					if(success == '1'){
						parent.bootbox.alert("保存成功");
					}else if(success == '0'){
						parent.bootbox.alert("请添加选项");
					}else{
						parent.bootbox.alert("保存失败");
					}
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					saveBtn.removeAttr("disabled");
					alert(textStatus);
					console.log(XMLHttpRequest, textStatus, errorThrown);
				},
				complete : function() {
					saveBtn.removeAttr("disabled");
					$(".load_bg,.load_img").hide();
				}
			};
			$("#queryForm").ajaxSubmit(options);
		}
		
		function isBlock(value){
			if(value==""||value==null||value==undefined){
				return true;
			}
			return false;
		}
	</script>
</body>
</html>
